﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="Reference/gcspread.sheets.8.40.20151.0.css" rel="stylesheet" />
    <script src="Reference/jquery-1.8.2.min.js"></script>
    <script src="Reference/gcspread.sheets.all.8.40.20151.0.min.js"></script>
    <link href="Reference/jquery-ui-1.10.0/themes/smoothness/jquery-ui.css" rel="stylesheet" />
    <script type='text/javascript' charset='utf-8'>
        $(document).ready(function () {
            //Set tree grid.
            var ns = GcSpread.Sheets;
            function TreeNodeCellType() {

            }
            TreeNodeCellType.prototype = new ns.TextCellType();

            TreeNodeCellType.prototype.paint = function (ctx, value, x, y, w, h, style, options) {
                var level = options.sheet.rowRangeGroup.getLevel(options.row);
                var nlevel = -1;
                if (options.row < options.sheet.getRowCount() - 1) {
                    nlevel = options.sheet.rowRangeGroup.getLevel(options.row + 1);
                }
                var hoffset = (level + 2) * 12;
                x += hoffset;
                w -= hoffset;

                var image;
                if (nlevel > level) {
                    image = document.getElementById('image1');
                }
                else {
                    image = document.getElementById('image2');
                }

                var imageWidth = image.width, imageMagin = 3, imageLayoutWidth = imageWidth + imageMagin * 2;
                x += imageLayoutWidth;
                w -= imageLayoutWidth;
                GcSpread.Sheets.CustomCellType.prototype.paint.apply(this, arguments);

                if (options.row == options.sheet.getRowCount() - 1) return; //last row

                if (nlevel > level) {
                    var collapsed = options.sheet.rowRangeGroup.isCollapsed(options.row + 1);
                    x -= imageLayoutWidth;
                    w += imageLayoutWidth;
                    var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
                    x--;
                    y += h / 2 - 3;
                    ctx.save();
                    ctx.fillStyle = "black";
                    ctx.beginPath();
                    if (collapsed) {
                        ctx.moveTo(x - 5, y);
                        ctx.lineTo(x, y + 3);
                        ctx.lineTo(x - 5, y + 6);
                    } else {
                        ctx.moveTo(x, y);
                        ctx.lineTo(x, y + 5);
                        ctx.lineTo(x - 5, y + 5);
                    }
                    ctx.fill();
                    ctx.restore();
                    ctx.drawImage(image, imageX, imageY);
                }
                else {
                    x -= imageLayoutWidth;
                    w += imageLayoutWidth;
                    var imageX = x + imageMagin, imageY = y + h / 2 - image.height / 2;
                    x--;
                    y += h / 2 - 3;
                    ctx.save();
                    ctx.drawImage(image, imageX, imageY);
                    ctx.restore();
                }
            };
            // override getHitInfo to allow cell type get mouse messages
            TreeNodeCellType.prototype.getHitInfo = function (x, y, cellStyle, cellRect, context) {
                return {
                    x: x,
                    y: y,
                    row: context.row,
                    col: context.col,
                    cellStyle: cellStyle,
                    cellRect: cellRect,
                    sheetArea: context.sheetArea
                };
            }
            TreeNodeCellType.prototype.processMouseDown = function (hitinfo) {
                var level = hitinfo.sheet.rowRangeGroup.getLevel(hitinfo.row);
                var hoffset = (level + 2) * 12 + hitinfo.cellRect.x;
                if (hitinfo.x < hoffset && hitinfo.x > hoffset - 10) {
                    var collapsed = hitinfo.sheet.rowRangeGroup.isCollapsed(hitinfo.row + 1);
                    hitinfo.sheet.rowRangeGroup.setCollapsed(hitinfo.row, !collapsed);
                    hitinfo.sheet.invalidateLayout();
                    hitinfo.sheet.repaint();
                }
            };

            function ColorCellType() {

            }
            ColorCellType.prototype = new ns.TextCellType();
            ColorCellType.prototype.paintText = function (ctx, value, x, y, w, h, style, options, text, conditionalForeColor, opacity) {
                if (!text) {
                    return;
                }
                ctx.save();
                ctx.beginPath();


                var fillStyle = style.foreColor,
                    font = style.font;
                if (font && ctx.font !== font) {
                    ctx.font = font;
                }

                var indent = 0,
                    textIndent = style.textIndent,
                    wordWrap = style.wordWrap,
                    hAlign = style.hAlign,
                    vAlign = style.vAlign,
                    textDecoration = style.textDecoration,
                    textAlign = "left",
                    textBaseline = "alphabetic",
                    adjX = 2,
                    adjY = 2,
                    textHeight = 0,
                    lineHeight = options.lineHeight,
                    lines = [],
                    lineCount = 0,
                    fontSize = options.fontInfo.fontSize;

                if (textIndent > 0) {
                    indent = textIndent * 8;
                }

                //textAlign
                adjX += indent;
                if (hAlign === ns.HorizontalAlign.center) {
                    adjX = w / 2;
                    textAlign = "center";
                } else if (hAlign === ns.HorizontalAlign.right) {
                    adjX = w - 1 - 2;   // - 2 is for the left and the right border line, - 1 is for begining from the left side of the right double line.
                    adjX -= indent;
                    textAlign = "right";
                }
                if (ctx.textAlign !== textAlign) {
                    ctx.textAlign = textAlign;
                }

                var redString, blackString;
                if (text.length > 3) {
                    redString = text.substring(text.length - 3, text.length);
                    blackString = text.substring(0, text.length - 3);
                } else {
                    redString = text;
                }

                var redStart = x;
                if (blackString) {
                    var blackWidth = ctx.measureText(blackString).width;
                    redStart += blackWidth;
                    if (hAlign === ns.HorizontalAlign.center) {
                        adjX -= blackWidth / 2;
                    } else if (hAlign === ns.HorizontalAlign.right) {
                        adjX -= (ctx.measureText(redString).width);
                    }
                    ctx.fillStyle = "black";
                    ctx.fillText(blackString, x + adjX, y + options.lineHeight + adjY);
                }
                ctx.fillStyle = "red";

                ctx.fillText(redString, redStart + adjX, y + options.lineHeight + adjY);
                ctx.restore();
            };


            var spread = new GcSpread.Sheets.Spread($("#ss")[0]);
            spread.tabStripVisible(false);
            spread.showHorizontalScrollbar(false);
            spread.showVerticalScrollbar(false);

            var sheet = spread.getActiveSheet();

            sheet.isPaintSuspended(true);
            sheet.suspendEvent();
            sheet.rowRangeGroup.direction = ns.RangeGroupDirection.Backward;
            sheet.getColumn(0).cellType(new TreeNodeCellType());

            sheet.setValue(0, 0, "Permanent Differences");
            sheet.setValue(1, 0, "Permanent Differences");
            sheet.setValue(2, 0, "4P01 - Club Dues");
            sheet.setValue(3, 0, "4P02 - Business Gifts");
            sheet.setValue(4, 0, "4P03 - Int Inc-Muni Borads");
            sheet.setValue(5, 0, "4P04 - Lobbying Expense");
            sheet.setValue(6, 0, "4P05 - Skybox");
            sheet.setValue(7, 0, "4P06 - Stock Options-Perm");
            sheet.setValue(8, 0, "4P07 - M&E");
            sheet.setValue(9, 0, "Total Permanent Differences");
            sheet.setValue(10, 0, "Capital Loss Limitation");
            sheet.setValue(11, 0, "Capital Gain/Loss, Sum included in Book income");
            sheet.setValue(12, 0, "Capital Loss Disallowed");
            sheet.setValue(13, 0, "Charitable Contribution Limitation");
            sheet.setValue(14, 0, "Charitable Contributions included in Book income");
            sheet.setValue(15, 0, "Demestic production activities deduction included in Book income");
            sheet.setValue(16, 0, "Fedeeral Taxable Income Limitation");
            sheet.setValue(17, 0, "Limitation percentage");
            sheet.setValue(18, 0, "Charitable Contribution limitation");
            sheet.setValue(19, 0, "Charitable Contributions disallowed");
            sheet.setValue(20, 0, "Federal Taxable Income before Net Operating Loss Deduction");
            sheet.rowRangeGroup.group(1, 9);
            sheet.rowRangeGroup.group(3, 8);
            sheet.rowRangeGroup.group(12, 2);
            sheet.rowRangeGroup.group(15, 6);
            sheet.getColumn(0).width(300);
            sheet.showRowRangeGroup(false);


            sheet.getColumn(1).cellType(new ColorCellType());
            var A = 30;
            var B = 30000;
            var lev = 1;
            var secondlev = 1;
            for (var i = 0; i < 21; i++) {
                var level = sheet.rowRangeGroup.getLevel(i);
                if (level == -1) {
                    lev = 1;
                    secondlev = 1;
                    sheet.setValue(i, 1, "---");
                }
                else if (level == 0) {
                    sheet.setValue(i, 1, "00" + lev);
                    lev++;
                    secondlev = 1;
                }
                else {
                    sheet.setValue(i, 1, "00" + lev + "00" + secondlev);
                    secondlev++;
                }

                sheet.setValue(i, 2, "m3");
                sheet.setValue(i, 3, (500 - 1) * Math.random() + 1);
                sheet.getCell(i, 3).formatter(new GcSpread.Sheets.GeneralFormatter("f", GcSpread.Sheets.FormatMode.StandardNumericMode));
                sheet.setValue(i, 4, (B - A) * Math.random() + A);
                sheet.getCell(i, 4).formatter(new GcSpread.Sheets.GeneralFormatter("f", GcSpread.Sheets.FormatMode.StandardNumericMode));
                sheet.setFormula(i, 5, '=D' + (i + 1).toString() + '*E' + (i + 1).toString());
                sheet.getCell(i, 5).formatter(new GcSpread.Sheets.GeneralFormatter("c3", GcSpread.Sheets.FormatMode.StandardNumericMode));
            }

            var h = ns.SheetArea.colHeader;

            sheet.setColumnCount(6, h);
            sheet.setColumnCount(6, GcSpread.Sheets.SheetArea.viewport);

            sheet.setRowCount(2, h);

            sheet.addSpan(0, 0, 2, 1, h);
            sheet.setValue(0, 0, "任务名称", h);

            sheet.addSpan(0, 1, 2, 1, h);
            sheet.setValue(0, 1, "任务编码", h);

            sheet.addSpan(0, 2, 2, 1, h);
            sheet.setValue(0, 2, "单位", h);

            sheet.addSpan(0, 3, 1, 3, h);
            sheet.setValue(0, 3, "施工图清单", h);

            sheet.setValue(1, 3, "数量", h);
            sheet.setValue(1, 4, "单价", h);
            sheet.setValue(1, 5, "合价", h);

            sheet.getColumns(1, 4).width(100);
            sheet.getColumns(5, 5).width(150);
            sheet.setRowCount(22);
            sheet.getColumn(1).hAlign(ns.HorizontalAlign.left);

            sheet.resumeEvent();
            sheet.isPaintSuspended(false);

            $("#btn").click(function () {
                var spread = $("#ss").wijspread("spread");
                var data = spread.toJSON();

                var spread1 = $("#ss1").wijspread("spread");
                spread1.fromJSON(data);
                var sheet = spread1.getActiveSheet();
                sheet.getColumn(0).cellType(new TreeNodeCellType());
            });

        });


    </script>

</head>
<body>
    <div class="sample-turtorial">
        <div id="ss" style="width:890px; height:460px;border: 1px solid gray;"></div>
        <div style="display:none">
            <!---->
            <img id="image1" src="Reference/folder.png" alt="" width="15" height="15" />
            <img id="image2" src="Reference/002.png" alt="" width="15" height="15" />
        </div>
    </div>
</body>
</html>
